<template>
	<view>
		<u-navbar :title="title" :border-bottom="borderBottom" title-bold title-color="#000"
			back-icon-color="#000" >
			<!-- :background="{background: _bgColor}" :custom-back="onBack" :immersive="_immersive" :is-back="_isBack" -->
			<div class="back type2" v-if="type == '2'">
				<div class="icon" @tap="onBack">
					<span class="ma icon-back"></span>
				</div>
				<div class="icon" @tap="onHome">
					<span class="ma icon-home"></span>
				</div>
			</div>
			
			<div class="back type3" v-else-if="type == '3'">
				<div class="icon" @tap="onBack">
					<span class="ma icon-back"></span>
				</div>
				<div class="icon" @tap="onHome">
					<span class="ma icon-home"></span>
				</div>
			</div>
			<!-- <image class="type4" v-else-if="type == '4'" src="@/static/img/tabbar/activity2.png" mode=""></image> -->
			<slot></slot>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		props: {
			//4种头部类型
			//0: 底部tabar类型的头部，没有返回图标
			//1: 普通的页面头部，只有一个返回图标
			//2: 爪爪pet那样的头部，多了一个返回首页的图标
			//3: 回馈日那样的沉浸式头部，高度塌陷
			type: {
				type: String,
				default: '1'
			},
			title: {
				type: String,
				default: '九歌灵藏'
			},
			borderBottom: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: '#FFF'
			},
			isBackToMini: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				_isBack: true, //是否显示返回图标
				_immersive: false ,//头部是否塌陷
				_bgColor: '#FFF' ,//头部背景颜色
			}
		},
		mounted(){
			this.init();
		},
		methods: {
			init(){
				switch (this.type){
					// case '0':
					// 	this.getHeaderType0();
					// 	break;
					case '1':
						this.getHeaderType1();
						break;
					// case '2':
					// 	this.getHeaderType2();
					// 	break;
					// case '3':
					// 	this.getHeaderType3();
					// case '4': 
					// 	this.getHeaderType3();
					// 	break;
					default:
						break;
				}
				this.$forceUpdate()
			},
			//第一种头部类型
			getHeaderType0(){
				this._bgColor = this.bgColor;
				this._isBack = false;
				this._immersive = false;
			},
			//第二种头部类型
			getHeaderType1(){
				// this._bgColor = this.bgColor;
				// this._isBack = true;
				// this._immersive = false;
			},
			//第二种头部类型
			getHeaderType2(){
				console.log('第二种头部类型')
				this._isBack = false;
				this._immersive = false;
				this._bgColor = '#FFF';
				//修改右上角胶囊颜色
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#000000'
				})
			},
			//第三种头部类型
			getHeaderType3(){
				console.log('第三种头部类型')
				this._isBack = false;
				this._immersive = true;
				this._bgColor = 'transparent';
				//修改右上角胶囊颜色
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#ffffff'
				})
			},
			onBack() {
				if (this.isBackToMini) {
					wx.navigateBackMiniProgram({
						success(res) {
							// 返回成功
						}
					})
				} else {
					uni.navigateBack({
						fail(err) {
							console.log(err)
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				}
			},
			onHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		watch: {
			//头部类型
			type(newVal,oldVal) {
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	.type2 {
		background-color: #FFF;
		border: 0.5px solid rgba(233,233,233,.8);
		.icon {
			&:first-child {
				border-right: 0.5px solid rgba(233,233,233,.8);
			}
			.ma {
				color: #000;
			}
		}
	}
	.type3 {
		background: rgba(0,0,0,.2);
		border: 0.5px solid rgba(255,255,255,0.2);
		.icon {
			&:first-child {
				border-right: 0.5px solid rgba(255, 255, 255, 0.4);
			}
			.ma {
				color: #FFF;
			}
		}
	}
	.back {
		width: 23.2vw;
		// height: 8.43vw;
		height: 8.53vw;
		// background-color: rgba(37, 37, 37, .2);
		// border: 0.17vw solid rgba(0,0,0,0.2);
		border-radius: 16px;
		display: flex;
		align-items: center;
		margin-bottom: 1.3vw;
		margin-left: 2.13vw;

		.icon-back {
			font-size: 6.27vw;
		}

		.icon {
			font-size: 3.73vw;
			width: 50%;
			height: 4.8vw;
			line-height: 4.8vw;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			// &:first-child{
			// 	border-right: 0.17vw solid rgba(0, 0, 0, 0.4);
			// }
			image {
				width: 50%;
				height: 4.8vw;
			}
		}
	}
	.type4 {
		height: 10vw;
		width: 10vw;
	}
</style>
